package myJs.components

import japgolly.scalajs.react.MonocleReact._
import japgolly.scalajs.react._
import japgolly.scalajs.react.component.Scala.BackendScope
import japgolly.scalajs.react.extra.StateSnapshot
import japgolly.scalajs.react.vdom.all._
import monocle.Lens
import monocle.macros.Lenses
import myJs.components.pure.{InputPureComponent, TogglePureComponent}
import myJs.myPkg.jquery._
import myJs.tool.Tool._

import scala.collection.immutable.SeqMap

/**
 * Created by yz on 3/11/2020
 */
object ExportDatComponent {

  @Lenses
  case class State(hasGroup:Boolean,sampleNum:String,formJq:JQuery=$("#form"))

  object State {

    def init = {
      State(hasGroup = true,sampleNum = "5")
    }

  }

  class Backend(bs: BackendScope[Unit, State]) {


    def didMount: Callback = {
      Callback {
      }
    }

    def unmount: Callback = {
      Callback {
      }
    }

    def render(s: State) = {

      implicit class MyLens[T](lens: Lens[State, T]) {

        def zoomL(implicit r: Reusability[T]) = {
          StateSnapshot.withReuse.zoomL(lens).prepareVia(bs).apply(s)
        }

      }

      div(
        div(`class`:="form-group",
          label(`class`:="control-label col-sm-3","拆分数据:"),
          div(`class`:="col-sm-2 toggling",
            TogglePureComponent.Props(State.hasGroup.zoomL, name = "hasGroup").render,
          ),
          div((display := "none").unless(s.hasGroup),
            label(`class`:="control-label col-sm-3","单文件样本数:"),
            div(`class`:="col-sm-3",
              InputPureComponent.Props(State.sampleNum.zoomL,name = "sampleNum",formJq = s.formJq).render,
            ),
          )
        )

      )

    }

  }

  def component(state: State) = {
    ScalaComponent.builder[Unit].initialState(state).renderBackend[Backend].
      componentDidMount(x => x.backend.didMount).componentWillUnmount(_.backend.unmount).
      build
  }

  val Component = component(State.init)

}
